<template>
    <div class="">
        <div class="flex items-center justify-between px-4">
            <div class="text-base font-bold">商品评价 (7196)</div>
            <div class="text-xs text-gray-500">好评 99.5%</div>
        </div>
        <div class="flex flex-wrap items-center gap-2 px-4 mt-2 text-xs">
            <div class="px-2 py-px text-orange-400 rounded-sm bg-orange-50" v-for="(item, index) in classify">{{ item }}
            </div>
        </div>
        <div class="px-4 mt-4 space-x-4 overflow-x-auto text-sm text-gray-600 whitespace-nowrap ">
            <div class="inline-flex w-5/6 p-2 rounded-lg bg-slate-50" v-for="(item, index) in comments">
                <div class="flex flex-col justify-between">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 overflow-hidden rounded-full">
                            <LazyImage :src="item.user.avatar" />
                        </div>
                        <div>{{ item.user.nickname }}</div>
                    </div>
                    <div class="mt-2 leading-5 whitespace-normal line-clamp-2">
                        {{ item.content }}
                    </div>
                </div>
                <div class="w-20 shrink-0 h-20  rounded-lg overflow-hidden relative">
                    <LazyImage :src="g"></LazyImage>
                    <div class="absolute bottom-0 right-0 bg-black/30 text-xs text-white px-1 rounded-tl-lg">+2</div>
                </div>
            </div>
        </div>
        <!-- <div class="px-4 mt-4 space-x-4 overflow-x-auto text-sm text-gray-600 whitespace-nowrap ">
            <div class="inline-block w-5/6 h-48 p-2 rounded-lg bg-slate-50" v-for="(item, index) in comments">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 overflow-hidden rounded-full">
                            <LazyImage :src="item.user.avatar" />
                        </div>
                        <div>{{ item.user.nickname }}</div>
                    </div>
                    <div>{{ item.timeAgo }}</div>
                </div>
                <div class="mt-2 ">
                    <div class="leading-5 whitespace-normal line-clamp-1">
                        {{ item.content }}
                    </div>
                    <div class="mt-2 space-x-2 overflow-x-auto">
                        <div class="inline-block w-1/3 h-24 bg-white border rounded-lg " v-for="(src, index) in item.atlas">
                            <LazyImage :src="src"></LazyImage>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/shop/goods/g2.png'
const comments = ref([
    {
        timeAgo: '刚刚',
        content: '如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生',
        atlas: [g,g],
        user: {
            nickname: '如果有来生',
            avatar: 'https://img.zcool.cn/community/01e1805e900b3ea80120a895b31d6f.jpg?x-oss-process=image/resize,m_fill,w_160,h_160,limit_0/auto-orient,1/sharpen,100/quality,q_100/format,webp'
        }
    },
    {
        timeAgo: '刚刚',
        content: '如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生如果有来生',
        atlas: [
            g, g, g
        ],
        user: {
            nickname: '如果有来生',
            avatar: 'https://img.zcool.cn/community/01e1805e900b3ea80120a895b31d6f.jpg?x-oss-process=image/resize,m_fill,w_160,h_160,limit_0/auto-orient,1/sharpen,100/quality,q_100/format,webp'
        }
    }
])
const classify = ref([
    //@ts-ignore
    `价格实惠 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `性价比高 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `服务好 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `物流快 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `价格实惠 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `性价比高 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `服务好 (${(parseInt(Math.random() * 1000))})`,
    //@ts-ignore
    `物流快 (${(parseInt(Math.random() * 1000))})`,
])
</script>
    
<style></style>